<template>
  <div class="w">
    <div class="goods-list">
      <ul class="ul">
        <RouterLink
          class="goods-item"
          v-for="item in threeCateData"
          :key="item.id"
          :to="`/goodsDetail?id=${item.id}`"
        >
          <img :src="item.picture" alt="" />
          <p>{{ item.name }}</p>
          <p>{{ item.desc }}</p>
          <p>&yen;{{ item.price }}</p>
        </RouterLink>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  // 接收传递的数据列表
  props: ["threeCateData"],
};
</script>

<style lang="scss" scoped>
@import "@/assets/css/hoverShadow.scss";
.w {
  margin-top: 25px;
  .sub-sort {
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .sort {
      display: flex;
      li {
        height: 30px;
        line-height: 28px;
        border: 1px solid #e4e4e4;
        padding: 0 20px;
        margin-right: 20px;
        color: #999;
        border-radius: 2px;
        position: relative;
        transition: all 0.3s;
        &.active {
          background: #27bb9a;
          border-color: #27bb9a;
          color: #fff;
        }
        .arrow {
          position: absolute;
          border: 5px solid transparent;
          right: 8px;
          &.up {
            top: 3px;
            border-bottom-color: #bbb;
            &.active {
              border-bottom-color: #27bb9a;
            }
          }
          &.down {
            top: 15px;
            border-top-color: #bbb;
            &.active {
              border-top-color: #27bb9a;
            }
          }
        }
      }
    }
  }
}
.goods-list {
  background: #fff;
  padding: 0 25px;
  margin-top: 25px;
  .ul {
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }
  .goods-item {
    display: block;
    width: 220px;
    height: 300px;
    padding: 20px 30px;
    text-align: center;
    margin-top: 10px;
    @include hoverShadow;
    img {
      width: 160px;
      height: 160px;
    }
    p {
      &:nth-child(2) {
        margin-top: 25px;
        width: 160px;
        font-size: 16px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        color: black;
      }
      &:nth-child(3) {
        margin-top: 5px;
        width: 160px;
        font-size: 16px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        color: #999;
        height: 29px;
      }
      &:nth-child(4) {
        margin-top: 5px;
        width: 160px;
        color: #cf4444;
        font-size: 20px;
      }
    }
  }
}
</style>
